<template>
  <div class="LorR-model login-model">
    <input
      class="LorR-txt"
      v-model="loginEmail"
      type="text"
      placeholder="请输入您的邮箱"
    />
    <input
      class="LorR-txt"
      v-model="loginPsw"
      type="password"
      placeholder="请输入您的密码"
    />
    <label class="LorR-label">
      <a href="javascript:;" @click="toVerifyLogin()">验证码登录</a>
    </label>
    <input class="LorR-btn" type="submit" @click="login()" value="登 录" />
  </div>
</template>

<script>
import http from "@/utils/http.js";
import global from "@/components/Global";
export default {
  data() {
    return {
      loginEmail: "",
      loginPsw: "",
    };
  },
  methods: {
    toVerifyLogin() {
      this.$emit("VL");
    },
    loginReset() {
      this.loginEmail = "";
      this.loginPsw = "";
    },
    login: global._debounce(function () {
      const req = {
        username: this.loginEmail,
        password: this.loginPsw,
      };
      if (!global.reEmail.test(req.username)) {
        this.$message.error("邮箱格式错误");
        return;
      }
      http.post("/login/common", req).then((res) => {
        if (res.data.code === 1) {
          console.log(obj.message);
          this.$message.error(obj.message);
          return;
        }
        let obj = res.data.data;
        this.$store.state.id = obj.id;
        this.$store.state.alipay = obj.alipay;
        this.$store.state.username = obj.username;
        this.$store.state.mail = obj.mail;
        this.$store.state.address = obj.contactaddress;
        this.$emit("sucess");
      });
    }),
  },
};
</script>

<style lang="scss">
@import "@/assets/global";
input::-webkit-input-placeholder {
  color: #d7d8da;
}
.LorR-model {
  float: left;
  width: 100%;
  margin-top: 37px;
  .LorR-txt {
    display: block;
    width: 95%;
    height: 55px;
    font-size: larger;
    background-color: #f7f8fa;
    color: #666;
    border-radius: 12px;
    padding-left: 18px;
  }

  .LorR-btn {
    display: block;
    width: 100%;
    height: 55px;
    margin-top: 30px;
    background-color: $theme;
    color: #fff;
    border-radius: 25px;
    cursor: pointer;
    font-size: medium;
  }
  .LorR-label {
    display: block;
    margin-top: 10px;
    font-size: small;
    a {
      @include goodA;
      padding-left: 5px;
    }
    a:hover {
      color: $theme;
    }
  }
}
.login-model {
  .LorR-txt:first-child {
    margin-bottom: 40px;
  }
}
</style>